<template>
  <div class="breadCrumb">
    <router-link
      :to="{ name: item.name }"
      v-for="item in data"
      :key="item.name"
    >
      {{ item.meta.name + sepearator }}
    </router-link>
  </div>
</template>
<script setup>
import { toRefs, watchEffect } from "vue";
let props = defineProps({
  data: {
    type: Array,
    default() {
      return [];
    },
  },
  sepearator: {
    type: String,
    default() {
      return "/";
    },
  },
});
watchEffect(() => {
  console.log(props.data);
});
let { data, sepearator } = toRefs(props);
// console.log(props);
</script>
<style scoped>
.breadCrumb {
  margin: 10px 0;
}
.breadCrumb a {
  font-size: 16px;
  font-weight: 700;
  color: black;
  margin: 0 5px;
}
</style>
